<template>
  <view class="mine-container">
    <view class="header-container" :style="'background: url(' + $config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/bg@3x.png) no-repeat center'">
      <view class="header">
        <view class="left"></view>
        <view class="center">我的</view>
        <view class="right"></view>
      </view>
      <view v-if="isLogined" class="mineinfo" @click="toMyInfo()">
        <basic-image :costomer-style="{
          width: '60px',
          height: '60px',
          borderRadius: '50%'
        }" :src="avatarUrl" :error-src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/no_avatar.png'" />
        <!-- <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/avatar.png'"> -->
        <view class="detail">
          <text>{{ name }}</text>
          <view>{{ mobileNumber }}</view>
        </view>
      </view>
      <view v-else class="mineinfo" @click="toLogin()">
        <basic-image :costomer-style="{
          width: '60px',
          height: '60px',
          borderRadius: '50%'
        }" :src="avatarUrl" :error-src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/no_avatar.png'" />
        <!-- <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/avatar.png'"> -->
        <view class="detail">
          <text>您尚未登录</text>
          <view>前往登录</view>
        </view>
      </view>
    </view>
    <view class="main-container">
      <view class="menu-container">
        <!-- <view class="menu-item" @click="toMobileCallPage">
          <img class="icon-left" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_01@3x.png'" alt="">
          <view class="label">紧急报警</view>
          <img class="icon-right" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_right@3x.png'" alt="">
        </view> -->
        <view class="menu-item" @click="toCommentPage">
          <img class="icon-left" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_02@3x.png'" alt="">
          <view class="label">我的评价</view>
          <img class="icon-right" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_right@3x.png'" alt="">
        </view>
        <view class="menu-item" @click="toSharePage">
          <img class="icon-left" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_03@3x.png'" alt="">
          <view class="label">分享给好友</view>
          <img class="icon-right" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_right@3x.png'" alt="">
        </view>
        <view class="dividing-line"></view>
        <view class="menu-item" @click="toHelpPage">
          <img class="icon-left" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_09.png'" alt="" style="width: 18px; height: 18px; margin-right: 5px;">
          <view class="label">帮助中心</view>
          <img class="icon-right" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_right@3x.png'" alt="">
        </view>
        <view class="menu-item" @click="toFeedbackPage">
          <img class="icon-left" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_04@3x.png'" alt="">
          <view class="label">反馈</view>
          <img class="icon-right" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_right@3x.png'" alt="">
        </view>
        <view class="menu-item" @click="toAboutPage">
          <img class="icon-left" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_06.png'" alt="">
          <view class="label">关于</view>
          <img class="icon-right" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_right@3x.png'" alt="">
        </view>
        <view class="menu-item">
          <img class="icon-left" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_07.png'" alt="">
          <view class="label">清除缓存</view>
          <img class="icon-right" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_right@3x.png'" alt="">
        </view>
        <view class="menu-item" @click="toDocPage">
          <img class="icon-left" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_08.png'" alt="">
          <view class="label">用户协议</view>
          <img class="icon-right" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_right@3x.png'" alt="">
        </view>
        <view class="menu-item">
          <img class="icon-left" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_05@3x.png'" alt="">
          <view class="label">系统设置</view>
          <img class="icon-right" :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/mine_slices/icon_right@3x.png'" alt="">
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { token } from '@/util/storage';
import Vue from 'vue'
import BasicImage from "@/components/basic-image/basic-image.vue";
export default Vue.extend({
  components: { BasicImage },
  data() {
    return {
      isLogined: false,
      avatarUrl: "",
      name: "",
      mobileNumber: ""
    };
  },
  mounted() {
    this.initLoginStatus();
  },
  methods: {
    initLoginStatus() {
      this.isLogined = !!token.get();
      if (this.isLogined) {
        this.getSelfInfo();
      }
    },
    getSelfInfo() {
      this.$mainApi.apiGetSelf().then((res: any) => {
        console.log(res);
        this.avatarUrl = res.data.avatarUrl;
        this.name = res.data.name;
        this.mobileNumber = res.data.mobileNumber;
      });
    },
    toAboutPage() {
      uni.navigateTo({
        url: "/pages/other/about"
      });
    },
    toHelpPage() {
      uni.navigateTo({
        url: "/pages/other/help"
      });
    },
    toFeedbackPage() {
      uni.navigateTo({
        url: "/pages/other/feedback"
      });
    },
    toCommentPage() {
      uni.navigateTo({
        url: "/pages/other/comment"
      });
    },
    toDocPage() {
      uni.navigateTo({
        url: "/pages/other/doc"
      });
    },
    toMobileCallPage() {
      location.href = "tel:17621958573";
    },
    toSharePage() {
      uni.navigateTo({
        url: "/pages/other/share"
      });
    },
    toMyInfo() {
      uni.navigateTo({
        url: "/pages/other/myinfo"
      });
    },
    toLogin() {
      if (!token.get()) {
        uni.redirectTo({
          url: "/pages/login/index"
        });
      } else {
        this.initLoginStatus();
      }
    }
  }
})
</script>

<style scoped>
.mine-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header-container {
  background-size: cover;
  display: flex;
  flex-direction: column;
}

.header-container .header {
  color: #fff;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
}

.header-container .header .left,
.header-container .header .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-container .header .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-container .mineinfo {
  display: flex;
  padding: 15px;
  padding-bottom: 48px;
}

.header-container .mineinfo img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}

.header-container .mineinfo .detail {
  color: #FFFFFF;
  font-size: 16px;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-container {
  flex-grow: 1;
  overflow: auto;
}

.menu-container {
  display: flex;
  flex-direction: column;
  padding-top: 15px
}

.menu-container .menu-item {
  padding: 15px;
  display: flex;
  align-items: center;
}

.menu-container .menu-item .icon-left {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}

.menu-container .menu-item .label {
  font-size: 14px;
  flex-grow: 1;
}

.menu-container .menu-item .icon-right {
  width: 7px;
  height: 14px;
  flex-shrink: 0;
}

.dividing-line {
  height: 8px;
  background-color: #f4f7f7;
}

.toselect-btn {
  color: #FFFFFF;
  font-size: 14px;
  margin-top: 15px;
  padding: 10px;
  background-color: #006b65;
  border-radius: 6px;
}
</style>